<template>
  <PageLayout >
    <a-card>
      <a-descriptions :column="1" title="个人信息">
        <a-descriptions-item label="姓名">{{
          detail.nickname
        }}</a-descriptions-item>
        <a-descriptions-item label="邮箱">{{
          detail.email
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card>
      <a-descriptions :column="1" title="反馈信息">
        <a-descriptions-item label="反馈信息">{{
          detail.content
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card>
      <a-form style="width: 400px" v-if="detail.status != 2" :model="formState" :rules="rules" ref="formRef" layout="Vertical" :labelCol="{ style: { width: '80px' } }">
        <a-form-item label="备注信息" name="remark" required>
          <a-textarea v-model:value="formState.remark" placeholder="请输入备注信息" :maxlength="500" />
        </a-form-item>
        <a-form-item label="处理状态" name="status" required>
          <a-select v-model:value="formState.status" placeholder="请选择处理状态" :options="statusList" />
        </a-form-item>
        <a-button type="primary" class="float-right" style="width: 100px" @click="comfirm">确定</a-button>
      </a-form>
      <a-descriptions v-else :column="1" title="处理记录">
        <a-descriptions-item label="备注信息">{{
          detail.remark
        }}</a-descriptions-item>
        <a-descriptions-item label="处理状态">{{
          detail.status == 0
            ? "未处理"
            : detail.status == 1
            ? "处理中"
            : "已处理"
        }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
  </PageLayout>
</template>

<script setup>
import { postFeedbackDetail, postFeedbackHandle } from "@/api/common";
import { message } from "ant-design-vue";
import { reactive } from "vue";
const route = useRoute();
const router = useRouter();
const detail = ref({});
const statusList = [
  // {
  //   label: "未处理",
  //   value: "0",
  // },
  {
    label: "处理中",
    value: 1,
  },
  {
    label: "已处理",
    value: 2,
  },
];
const formState = reactive({
  id: "",
  nickname: "",
  content: "",
  email: "",
  status: undefined,
  remark: "",
  sysUserId: null,
  auditTime: null,
  updateTime: "",
  createTime: ""
});
onMounted(() => {
  postFeedbackDetail({ id: route.query.id }).then((res) => {
    detail.value = res.data;
    if (detail.value.status == 1) {

      for (let key in formState) {
        formState[key] = res.data[key]
      }
    }
  });
});
const comfirm = () => {
  postFeedbackHandle({
    ...formState,
    id: route.query.id,
  }).then((res) => {
    message.success("处理成功");
    router.go(-1);
  });
};
</script>

<style lang="less" scoped>
.type-list {
}
</style>
